<style lang="scss" scope>
@import "@/assets/css/variable";
.case {
  position: absolute;
  font-family: "SimHei";
  top: 0;
  bottom: $tabbar-height;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .swipe_up {
    width: 100%;
    // height: 8rem;
    padding-bottom: 10px;
    border-radius: 0 0 20% 20%;
    .h_title {
      color: white;
      font-size: 1.4rem;
	  min-height: 4rem;
      line-height: 6rem;
	  padding:0 25px;
      span {
        font-weight: 600;
      }
    }
  }
  .swipe_down {
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 8px;
    // margin-bottom: 10px;
    .swipe_van {
      text-align: center;
      width: 90%;
      // height: 13rem;
      margin-top: -2rem;
      border-radius: 8px;
      text-align: center;
    }
  }
  .panle {
    box-sizing: border-box;
    padding: 0 12px;
    .panle_item {
      box-sizing: border-box;
      margin-top: 15px;
      padding: 0 15px;
      width: 100%;
      // height: 5rem;
      background-color: white;
      .panle_up {
        display: flex;
        padding: 15px 0;
        .imgs {
          width: 45px;
          height: 45px;
          overflow: hidden;
          border-radius: 8px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .titles {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .mart {
            font-size: 16px;
            color: #333333;
          }
          .mart_dwon {
            color: #999;
          }
        }
      }

      .panle_conter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        .conter-left {
          display: flex;
          align-items: center;
          .parallelogram {
            // width: 28px;
            font-size: 12px;
            color: white;
            border-radius: 5px;
            padding: 4px 5px;
            background: #ff4d2a;
            margin-right: 6px;
          }
          span {
            font-size: 16px;
          }
        }
      }

      .priec {
        // padding: 12px 0;
        color: #ff4d2a;
        span {
          font-size: 24px;
          font-weight: 600;
        }
      }

      .panle_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        :nth-child(1) {
          color: #666666;
          font-size: 14px;
        }
        :nth-child(2) {
          padding: 5px 12px;
          display: inline-block;
          color: #000;
          background-color: #f2f2f2;
          border-radius: 15px;
        }
      }
    }
  }
}
</style>
<template>
  <div class="case">
    <div class="swipe_up" :style="{ backgroundColor: $store.state.masterColor || color }">
      <div class="h_title">
        <div v-if="config.is_open==1">
			<b>我们为所有商户吸引了<span>{{ (Number(fansInfo.browse_num)+Number(config.fictitious)) }}</span>人</b>
		</div>
		<!-- <div v-else class="t-center">
			{{config.titleH5}}
		</div> -->
      </div>
    </div>
    <div class="swipe_down">
      <div class="swipe_van">
        <my-swipe></my-swipe>
      </div>
    </div>

    <!-- <my-case-tabs></my-case-tabs> -->
    <div class="panle">
      <van-pull-refresh
        v-model="loadingRefresh"
        @refresh="refreshEventone"
        v-if="active == 0"
      >
        <van-tabs
          v-model="active"
          @click="onClickTabs"
          :color="$store.getters.getMasterColor || color"
          sticky
        >
          <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              offset="100"
              @load="getActivityPage"
            >
              <div
                class="panle_item"
                v-for="item in activityList"
                :key="item.id"
                @click="activityClick(item)"
              >
                <div class="panle_up">
                  <div class="imgs">
                    <img :src="item.merchantavatar" alt="" />
                  </div>
                  <div class="titles">
                    <div class="mart">{{ item.merchantname }}</div>
                    <div class="mart_dwon">
                      <span>浏览 {{ item.browse_num }}</span> |
                      <span> 参与 {{ item.join_num }}</span>
                    </div>
                  </div>
                </div>
                <div class="panle_conter">
                  <div class="conter-left">
                    <div class="parallelogram" v-if="item.typename">{{ item.typename }}</div>
                    <span>{{ item.title }}</span>
                  </div>
                  <!-- | <span>活动助手代理招募</span> -->

                  <!-- <div class="priec" v-if="item.paid != '0.00'">
                    ¥<span>{{ item.paid }}</span>
                  </div> -->
                </div>
                <div class="imgs">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="panle_footer">
                  <span>{{ item.statusname }}</span>
                  <span>订单 {{ item.paysum }}</span>
                </div>
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </van-pull-refresh>

      <van-pull-refresh v-model="loadingRefresh" @refresh="refreshEvent" v-else>
        <van-tabs
          v-model="active"
          @click="onClickTabs"
          :color="$store.getters.getMasterColor || mainColor"
          sticky
        >
          <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              offset="100"
              @load="getActivityPage"
            >
              <div
                class="panle_item"
                v-for="item in activityList"
                :key="item.id"
                @click="focusClick(item.activity)"
              >
                <div class="panle_up">
                  <div class="imgs">
                    <img :src="item.activity.merchantavatar" alt="" />
                  </div>
                  <div class="titles">
                    <div class="mart">{{ item.activity.merchantname }}</div>
                    <div class="mart_dwon">
                      <span>浏览 {{ item.activity.browse_num }}</span> |
                      <span> 参与 {{ item.activity.join_num }}</span>
                    </div>
                  </div>
                </div>
                <div class="panle_conter">
                  <div class="conter-left">
                    <div class="parallelogram" v-if="item.activity.typename">
                      {{ item.activity.typename }}
                    </div>
                    <span>{{ item.activity.title }}</span>
                  </div>
                  <!-- | <span>活动助手代理招募</span> -->
<!-- 
                  <div class="priec" v-if="item.activity.paid != '0.00'">
                    ¥<span>{{ item.activity.paid }}</span>
                  </div> -->
                </div>
                <div class="imgs">
                  <img :src="item.activity.cover" alt="" />
                </div>
                <div class="panle_footer">
                  <span>{{ item.activity.statusname }}</span>
                  <span>订单{{ item.activity.paysum }}</span>
                </div>
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </van-pull-refresh>
    </div>

    <div class="tabbar-height"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Tab, Tabs, PullRefresh, Loading } from "vant";
import mySwipe from "@/components/Swipe.vue";
import myCaseTabs from "@/components/CaseTabsss.vue";
import { myMixins } from "@/assets/js/mixins.js";
import { mapGetters } from "vuex";
export default {
  name: "Case",
  mixins: [myMixins],
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
    [PullRefresh.name]: PullRefresh,
    mySwipe,
    myCaseTabs,
  },
  data() {
    return {
      code: "",
      openid: "",
      access_token: "",
      appid: "",
      config: "",
      fansInfo: {},
      color: "#ff0000",
      activeName: 0,
      pageNo: 1,
      pageSize: 10,
      activityList: [],
      loadingRefresh: false,
      loading: false,
      finished: false,
      active: 0,
      thisItem: {},
      tabList: [
        {
          id: 0,
          name: "热门活动",
        },
        {
          id: 1,
          name: "我的关注",
        },
      ],
    };
  },
  computed: {
    // ...mapGetters(['getMasterColor']),
  },
  created() {
    this.getConfigItem();
    this.getActivityPage();
  },
  mounted() {
    console.log("this.color", this.color);
    this.code = this.$store.state.code;
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
      
    } else {
      this.openid = this.$store.state.openid;
    }
    this.access_token = this.$store.state.access_token;
    this.appid = this.$store.state.appid;
    // this.configItemShare()

    this.getActivityFans();
    // console.log("=========sharetitle=======",this.sharetitle)
    if (localStorage.getItem("tabbar")) {
      const tabbar = JSON.parse(localStorage.getItem("tabbar"));
      // document.title = tabbar[0].text;
    }
  },
  methods: {
    activityClick(item) {
      console.log(item, "item");
      const _this = this;
      let params = {
        openid: _this.openid,
        activity_id: item.id,
      };
      if(item.statusname == '已结束') return this.$toast('该活动已结束')
      _this.$request.getFollowSave(params).then((res) => {
        _this.thisItem = item;
        // item.href||
        let href = `${location.protocol}//${location.hostname}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/${
          this.thisItem.model || "applyActivity"
        }/ActivityShow/${this.thisItem.id}`;
        window.location.href = href;
      });
    },
    focusClick(item) {
      const _this = this;
       _this.thisItem = item;
        // item.href||
        let href = `${location.protocol}//${location.hostname}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/${
          this.thisItem.model || "applyActivity"
        }/ActivityShow/${this.thisItem.id}`;
        window.location.href = href;
    },
    refreshEventone() {
      this.pageNo = 1;
      this.activityList = [];
      this.getActivityPage();
    },
    getActivityPage() {
      const _this = this;
      let params = {
		// merchant_id: 111111,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
      };
      _this.loading = true;
      _this.loadingRefresh = true;
      _this.$request
        .getActivityPage(params)
        .then((res) => {
          console.log(res.data.data, "res.data.data");
          let data = res.data.data;
          const list = data.map((item) => {
            const leaveTime =
              new Date(item.end_time).getTime() - new Date().getTime();
            const leaveDay = leaveTime / 1000 / 86400;
            item.leaveDay = Math.floor(leaveDay);
            return item;
          });
          _this.activityList.push(...list);
          if (_this.activityList.length >= res.data.totalCount) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
        })
        .finally(() => {
          //console.log('finally')
          this.loadingRefresh = false;
          this.loading = false;
        });
    },
    onClickTabs(index) {
      this.active = index;
      this.activityList = [];
      this.pageNo = 1;
      this.finished = false;
      if (index == 0) {
        this.getActivityPage();
      } else {
        this.getFollowPage();
      }
    },

    refreshEvent() {
      this.pageNo = 1;
      this.activityList = [];
      this.getFollowPage();
    },
    getFollowPage() {
      const _this = this;
      let params = {
        openid: _this.openid,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
      };
      _this.loading = true;
      _this.loadingRefresh = true;
      _this.$request
        .getFollowPage(params)
        .then((res) => {
          console.log(res.data.data, "res.data.data");
          let list = res.data.data;
          _this.activityList.push(...list);
          if (_this.pageNo >= Math.ceil(res.data.totalCount / _this.pageSize)) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
        })
        .finally(() => {
          //console.log('finally')
          this.loadingRefresh = false;
          this.loading = false;
        });
    },
    getConfigItem() {
      let params = {};
      this.$request.ConfigItem(params).then((res) => {
        const config = res.data.value;
		this.config = config
        // document.title = config.titleH5;
        this.color = config.color;
        this.$forceUpdate();
      });
    },
    tabClick(index) {
      console.log(index);
    },
    getActivityFans() {
      let params = {
        openid: this.openid,
      };
      console.log("params", params);
      this.$request.getActivityFans(params).then((res) => {
        console.log("res", res);
        this.fansInfo = res.data;
      });
    },
  },
};
</script>
